<template>
  <div class="pageListWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">执法日期:</span>
                <span class="searchInputFont">
                  <el-date-picker
                     v-model="searchInfo.punishTime"
                     @change="searchRowsInfo"
                     style="width: 100%;"
                     align="right"
                     type="date"
                     size="mini"
                     value-format="yyyy-MM-dd"
                     placeholder="选择日期"
                     :picker-options="pickerOptions1">
                  </el-date-picker>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">案件编号:</span>
                <span class="searchInputFont">
                  <el-input clearable size="mini" v-model="searchInfo.punishNo" @change="searchRowsInfo(true)" auto-complete="off" placeholder="案件编号"></el-input>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">用户名称:</span>
                <span class="searchInputFont">
                    <el-input clearable size="mini" v-model="searchInfo.userName" @change="searchRowsInfo(true)" auto-complete="off" placeholder="用户名"></el-input>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">用户编号:</span>
                <span class="searchInputFont">
                    <el-input clearable size="mini" v-model="searchInfo.userNo" @change="searchRowsInfo(true)" auto-complete="off" placeholder="用户编号"></el-input>
                </span>
              </div>
            </el-col>            
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="searchRowsInfo(true)">查询</el-button>
              <uploadDialog v-if="$store.state.btnMenuIds.indexOf(210)>-1" @searchRowsInfo="searchRowsInfo"></uploadDialog>
            </div>
          </el-row>
        </div>
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">处罚对象:</span>
                <span class="searchInputFont">
                    <el-select v-model="searchInfo.punishTarget" @change="searchRowsInfo(true)" size="mini" clearable placeholder="处罚对象">
                       <el-option
                         v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                        </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">开具部门:</span>
                <span class="searchInputFont">
                    <el-select :disabled="$store.state.agencyId" style="width: 100%;" v-model="searchInfo.agencyId" @change="searchRowsInfo(true)" size="small" clearable placeholder="开具部门">
                    <el-option
                      v-for="item in $store.state.govAgencyList"
                      :key="item.agencyId"
                      :label="item.agencyName"
                      :value="item.agencyId">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">案件状态:</span>
                <span class="searchInputFont">
                    <el-select v-model="searchInfo.punishState" @change="searchRowsInfo(true)" size="mini" clearable placeholder="案件状态">
                       <el-option
                         v-for="item in punishStateList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                        </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="$refs.addBtn.dialogFormVisibleAdd=true" v-if="$store.state.btnMenuIds.indexOf(305)>-1">新增</el-button>
              <el-button type="primary" size="mini" @click="switchUrl(0)" v-show="urlType" v-if="$store.state.btnMenuIds.indexOf(309)>-1">全部案件</el-button>
              <el-button type="primary" size="mini" @click="switchUrl(1)" v-show="!urlType" v-if="$store.state.btnMenuIds.indexOf(309)>-1">代办列表</el-button>
            </div>
          </el-row>
        </div>
      </div>
      <div class="tableContainer" style="top: 123px;">
        <div class="tableInner" ref="tableInnerWrap">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            style="width: 100%"
          >
            <el-table-column
              prop="punishNo"
              label="案件编号"
              width="160"
            >
            </el-table-column>
            <el-table-column
              prop="agencyName"
              label="罚单部门"
              width="100"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.agencyName?scope.row.agencyName:"超级管理员"}}
              </template>
            </el-table-column>
            <el-table-column
              prop="punishTarget"
              label="处罚对象"
              width="100"              
            >
              <template slot-scope="scope">
                {{scope.row.punishTarget==0?"单车企业":scope.row.punishTarget==1?"骑行用户":""}}
              </template>
            </el-table-column>
            <el-table-column
              prop="userNo"
              label="用户编号"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label="用户名称"
              prop="userName"              
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="punishReason"
              label="处罚原因"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="punishWay"
              label="处罚方式"
              width="80"
            >
              <template slot-scope="scope">
                {{scope.row.punishWay==0?"警告":scope.row.punishWay==1?"罚款":""}}
              </template>
            </el-table-column>
            <el-table-column
              prop="punishTime"
              width="150"
              label="执法时间"
            >
            </el-table-column>
            <el-table-column
              prop="punishState"
              width="80"
              label="案件状态"
            >
              <template slot-scope="scope">
                {{scope.row.punishState==1?"未送达":scope.row.punishState==2?"已送达":scope.row.punishState==3?"已销号":""}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-tooltip :visible-arrow="false" class="item" effect="dark" content="编辑" placement="top-start" v-show="parseFloat(scope.row.punishState)<2?true: false" v-if="$store.state.btnMenuIds.indexOf(306)>-1">
                  <i @click="$refs.editBtn.init(scope.row.id)" class="iconfont icon-bianji1" style="margin-right: 10px;"></i>
                </el-tooltip>

                <el-tooltip :visible-arrow="false" class="item" effect="dark" content="处理" placement="top-start" v-show="parseFloat(scope.row.punishState)<3?true: false" v-if="$store.state.btnMenuIds.indexOf(307)>-1">
                  <i @click="$refs.doBtn.init(scope.row.id)" class="iconfont icon-shezhi" style="margin-right: 10px;"></i>
                </el-tooltip>

                <el-tooltip :visible-arrow="false" class="item" effect="dark" content="查看" placement="top-start" v-if="$store.state.btnMenuIds.indexOf(308)>-1">
                  <i @click="$refs.detailBtn.init(scope.row.id)" class="iconfont icon-chakan"></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="Pagination" style="text-align: left;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchInfo.page"
            :page-sizes="[10, 30, 50, 100,200]"
            :page-size="searchInfo.rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
          </el-pagination>
        </div>
      </div>
    </div>
    <addBtn ref="addBtn" @searchRowsInfo="searchRowsInfo(true)" />
    <detailBtn ref="detailBtn" @searchRowsInfo="searchRowsInfo(true)" />
    <doBtn ref="doBtn" @searchRowsInfo="searchRowsInfo(true)" />
    <editBtn ref="editBtn" @searchRowsInfo="searchRowsInfo(true)" />
  </div>
</template>

<script>
  import addBtn from "./addBtn.vue"
  import detailBtn from "./detailBtn.vue"
  import doBtn from "./doBtn.vue"
  import editBtn from "./editBtn.vue"
  import uploadDialog from "./uploadDialog.vue"
  export default {
    props: [],
    data(){
      return {
        rows: [],
        count: 0,
        urlType: 0,
        options: [
          {
            value: '0',
            label: '单车企业'
          },
          {
            value: '1',
            label: '骑行用户'
          }
        ],
        punishStateList: [
          {
            value: '1',
            label: '未送达'
          },
          {
            value: '2',
            label: '已送达'
          },
          {
            value: '3',
            label: '已销号'
          }
        ],
        //以下为搜索
        tableHeight: "200",
        searchInfo: {
          page:1,
          rows:10,
          punishTime: '',
          punishNo: '',
          punishTarget: '',
          agencyId: '',
          userNo: '',
          userName: '',
          punishState:''
        },
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      }
    },
    components: {addBtn, detailBtn, doBtn, editBtn, uploadDialog},
    created(){
      this.searchRowsInfo()

    },
    mounted(){
      this.$nextTick(() => {
        //表格滚动
        this.tableHeight = document.querySelector(".pageListWrap").clientHeight - 200
      })
    },
    methods: {
      switchUrl(value){
        this.urlType = value
        this.searchRowsInfo(1)
      },
      searchRowsInfo(val){
        val ? this.searchInfo.page = 1:''
        if(this.searchInfo.punishTime){
          this.searchInfo.punishTime += ' 00:00:00'
        }
        this.axios.post(process.env.API_HOST + (this.urlType == 0 ? `/punish/selectPunishGrid` : `/punish/selectPunishUncancelledGrid`), this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code === 200) {
              this.rows = result.rows
              this.count = result.total
            }
          })
      },
      handleSizeChange(val) {
        this.searchInfo.rows = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.searchInfo.page = val;
        this.searchRowsInfo()
      },

    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .pageListWrap
    page()
    .do-dialog
      .el-dialog
        width 600px !important
    .image-list
      .item
        width 60px
        float left
        margin 0 10px 10px 0
        cursor pointer
        img
          max-width 100%;
    .iUpload
      .el-upload-list--picture-card .el-upload-list__item
        width 62px
        height 62px
      .el-upload--picture-card
        width 62px
        height 62px
        line-height 62px
        background-color #fff
        i
          font-size 20px
      .el-icon-zoom-in, .el-icon-delete
        font-size 14px
      .el-upload-list__item-status-label
        display none !important
    .notice
      .el-upload
        border none
        width 100%
        height auto
        line-height normal
        text-align left
    .image-preview
      .el-dialog__close
        color #666 !important
      .el-dialog
        width 60% !important
</style>